<template>
    <div class="allCategories">
      <div class="allCategories_header">
        <van-icon name="arrow-left" @click="onClickLeft()" class="allCategories_header_i"/>
        <div class="shou" @click="toAbout()">
          <van-search placeholder="请输入搜索内容"/>
        </div>
      </div>
      <section class="allCategories_con">
        <div class="allCategories_con_left">
          <ul>
            <li v-for="(item,$index) in navList" @click="toLink(item,$index)" :class="{active2:$index==active2}">
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div class="allCategories_con_right">
          <nav id="searchBar3">
            <p v-for="(item,$index) in arr" @click="getCommodity($index)" :class="{active:$index==active}">{{item.name}}</p>
          </nav>
          <div class="commodity_con2">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="text"
              @load="onLoad"
              :offset="100"
              :immediate-check="false"
            >
              <ul v-if="commodity.list && commodity.list.length>0" id="pr_type1">
                <li v-for="(item,index) in commodity.list" @click="link(item)" >
                  <img :src="item.image_url">
                  <p class="title_type font50 left">{{item.name}}</p>
                  <div class="pce_sum1">
                    <p class="price_type">
                      <span class="ty_one">￥</span>
                      <span class="ty_two">{{item.price}}</span></p>
                  </div>
                </li>
              </ul>
              <div class="empty" v-else>暂无数据</div>
            </van-list>
          </div>
          <div class="eco_vill_container" v-if="commodity.length == 0">
            <div class="cont_null">
              <img src="../../../static/img/user/null.png"><br>
              <p class="none_ship">商品未上架</p>
            </div>
          </div>
        </div>

      </section>


    </div>
</template>

<script>
    export default {
        name: "allCategories",
      data() {
        return {
          navList:[],
          commodity: [],
          commodityList:[],
          active: 0,
          active2: 0,
          arr: [],
          name: this.$route.query.name,
          restoredSession: [],
          id:'',
          nameTitle:'全部',
          index:0,
          //下拉刷新
          isLoading: false,
          //上拉加载
          loading: false,
          finished: false,
          pageNum: 1,
          text:'',
          type: "all",
          desc:"asc",
        };
      },
      mounted(){
        this.getClassification(this.active2 =0)
      },
      destroyed() {//离开该页面需要移除这个监听的事件
        sessionStorage.removeItem('shopList');
        sessionStorage.removeItem('navListOne');
      },
      methods: {
        //  返回上一层
        onClickLeft() {
          this.$router.go(-1);
        },
        //根据商品分类id跳转
        async toLink(item,index){
          this.active2 = index;
          sessionStorage.setItem("shopList",item.id);
          let params = {
            id:item.id,
            pageSize:10,
            pageNum:this.pageNum,
            type:this.type,
            desc:this.desc
          };
          const res = await this.$axios.post(this.$api.commodityData, params);
          if (res.success) {
            if (this.loading) {
              this.commodityList = this.commodityList.concat(res.data.list);
              this.commodity = res.data;
              this.commodity.list = this.commodityList;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.commodity = res.data;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
            this.toggleTwo(this.active =0)
            sessionStorage.removeItem('navListOne');
          } else {
            this.$toast(res.msg);
          }
        },

        //  分类导航
        async toggleTwo(index) {
          this.active = index;
          let params = {
            params: {
              parentId: sessionStorage.getItem("shopList"),
              isAll: 1
            }
          };
          const res = await this.$axios.get(this.$api.commodityNav, params);
          if (res.success) {
            this.arr = res.data;
          }else {
            this.$toast(res.msg);
          }
        },
        //点击分类
        async getCommodity (index) {
          this.active = index;
          if(index>0){
            this.commodity=[]
            this.commodityList=[]
            this.pageNum=1
          }
          if(sessionStorage.getItem("navListOne")){
            this.id=sessionStorage.getItem("navListOne")
          }else {
            this.id=sessionStorage.getItem("shopList")
          }
          if(this.arr[index].name=='全部'){
            let params = {
              id:this.id,
              pageSize:10,
              pageNum:this.pageNum,
              productName:'',
              type:this.type,
              desc:this.desc
            };
            const res = await this.$axios.post(this.$api.commodityData, params);
            if (res.success) {
              if (this.loading) {
                this.commodityList = this.commodityList.concat(res.data.list);
                this.commodity = res.data;
                this.commodity.list = this.commodityList;
                if (this.commodity.list.length >= this.commodity.total) {
                  this.finished = true;
                  console.log('0')
                } else {
                  this.pageNum++;
                  console.log('1')
                }
              } else {
                this.commodity = res.data;
                console.log('2')
                if (this.commodity.list.length >= this.commodity.total) {
                  this.finished = true;
                  this.text='没有了'
                  console.log('3')
                }
              }
              this.isLoading = false;
              this.loading = false;
            } else {
              this.$toast(res.msg);
            }
          } else {
            let params = {
              id:this.id,
              pageSize:10,
              pageNum:this.pageNum,
              productName:this.arr[index].name,
              type:this.type,
              desc:this.desc
            };
            const res = await this.$axios.post(this.$api.commodityData, params);
            if (res.success) {
              if (this.loading) {
                this.commodityList = this.commodityList.concat(res.data.list);
                this.commodity = res.data;
                this.commodity.list = this.commodityList;
                if (this.commodity.list.length >= this.commodity.total) {
                  this.finished = true;
                } else {
                  this.pageNum++;
                }
              } else {
                this.commodity = res.data;
                if (this.commodity.list.length >= this.commodity.total) {
                  this.finished = true;
                  this.text='没有更多了'
                }
              }
              this.isLoading = false;
              this.loading = false;
            } else {
              this.$toast(res.msg);
            }
          }
        },

        //获取商品
        async getCommodityShop () {
          let params = {
            id:sessionStorage.getItem("navListOne"),
            pageSize:10,
            pageNum:this.pageNum,
            type:this.type,
            desc:this.desc
          };
          const res = await this.$axios.post(this.$api.commodityData, params);
          if (res.success) {
            if (this.loading) {
              this.commodityList = this.commodityList.concat(res.data.list);
              this.commodity = res.data;
              this.commodity.list = this.commodityList;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.commodity = res.data;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        },

        onLoad(){
          // 上拉加载
          if (this.commodity.list && this.commodity.list.length > 0) {
            if (this.index == 0) {
              this.getCommodity(this.index);// 上拉触发的分页查询
            } else {
              this.getCommodity(this.index += 1);
            }
          }
        },
        //获取商品分类
        async getClassification() {
          let params = {

          };
          const res = await this.$axios.get(this.$api.navData, params);
          if (res.success) {
            this.navList = res.data;
            sessionStorage.setItem("navListOne",this.navList[0].id);
            this.toggle( this.active =0)
          } else {
            this.$toast(res.msg);
          }
        },
        //  分类导航
        async toggle(index) {
          let params = {
            params: {
              parentId: sessionStorage.getItem("navListOne"),
              isAll: 1
            }
          };
          const res = await this.$axios.get(this.$api.commodityNav, params);
          if (res.success) {
            this.arr = res.data;
            this.getCommodityShop()
          }else {
            this.$toast(res.msg);
          }
        },
        toAbout(){
          this.$router.push({path:'/About'})
        },

        //跳转商品详情页
        link(item){
          this.$router.push({
            name:'商品详情', query:{id:item.id}})
        },
      }
    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .van-cell {
     background-color: #f7f7f7 !important;
     border-radius: 50px !important;
  }
</style>
